<template>
  <div class="w1300">
    <div class="photo-group">
      <h2>相册</h2>
      <ul>
        <li v-for="item in 5" :key="item">
          <el-image class="avatar" fit="contain"></el-image>
          <span>团队相册</span>
          <p>2024-06-01 18:00:00更新</p>
        </li>
      </ul>
    </div>

    <div class="photo-group">
      <h2>图片</h2>
      <ul>
        <li v-for="item in 5" :key="item">
          <el-image class="avatar" fit="contain"></el-image>
          <p>2024-06-01 18:00:00更新</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.w1300 {
  .photo-group {
    padding-top: 55px;
    h2 {
      font-size: 20px;
      font-weight: 500;
    }
    ul {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      li {
        display: flex;
        flex-direction: column;
        .avatar {
          width: 222px;
          height: 114px;
          border-radius: 5px;
        }
        span {
          font-size: 14px;
          color: #333;
          margin-top: 15px;
        }
        p {
          font-size: 12px;
          color: #999;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
